import React from 'react'
import PropTypes from 'prop-types'
import Product from './Product'

class Cart extends React.Component {
  render() {
    const { products, total, onCheckoutClicked } = this.props
    const hasProducts = products.length > 0
    const nodes = hasProducts
      ? (
        products.map(product =>
          <Product
            title={product.title}
            price={product.price}
            quantity={product.quantity}
            key={product.id} />
        )
      )
      : (
        <em>Please add some products to cart.</em>
      )
    return (
      <div>
        <h3>Your Cart</h3>
        <div>{nodes}</div>
        <p>Total: &#36;{total}</p>
        <button
          onClick={onCheckoutClicked}
          disabled={hasProducts ? '' : 'disabled'} >
          Checkout
        </button>
      </div>
    )
  }
}

Cart.propTypes = {
  products: PropTypes.array,
  total: PropTypes.string,
  onCheckoutClicked: PropTypes.func
}

export default Cart
